<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录示例</title>
</head>
<body>
<button onclick="login()">登录</button>
<button onclick="getUserInfo()">获取用户信息</button>
<button onclick="logout()">注销</button>
<!--
Token 的每次使用都需要前端显式地从存储（如 localStorage）中提取，并手动添加到请求头（如 Authorization）中发送给后端
为什么需要前端主动携带 Token？
Token 的本质：
Token 是一个无状态的字符串（如 JWT），浏览器不会自动存储或发送它（不像 Cookie 会被浏览器自动管理）。
前端责任：
开发者必须手动完成以下步骤：
存储 Token：登录后保存到 localStorage/sessionStorage 或内存中。
发送 Token：在每次需要认证的请求中，主动将 Token 放入 Authorization 请求头。
清理 Token：注销或过期后移除它。
对比 Cookie/Session：
特性	    Token-Based 认证	                Cookie/Session 认证
存储位置	前端显式存储（如 localStorage）	浏览器自动管理 Cookie
发送方式	手动设置 Authorization 头	        浏览器自动携带 Cookie
跨域支持	无需额外配置	                    需处理跨域（CORS/CSRF）
-->
<!--
sequenceDiagram
    participant 前端
    participant 后端
    前端->>后端: 登录（用户名 + 密码）
    后端->>前端: 返回 Token
    前端->>前端: 存储 Token（localStorage）
Token 的每次使用都需要前端显式地从存储（如 localStorage）中提取，并手动添加到请求头（如 Authorization）中发送给后端。
    前端->>后端: 请求数据（携带 Authorization 头）
    后端->>后端: 验证 Token
    后端->>前端: 返回数据
    前端->>后端: 注销（携带 Token）
    后端->>后端: 废弃 Token
    后端->>前端: 确认注销
    前端->>前端: 清除本地 Token
-->
<script>
    // 登录函数（保持不变）
    function login() {
        fetch("http://localhost:9000/Token/login?username=admin&password=123456")
            .then(res => res.json())
            .then(data => {
                if (data.token) {
                    localStorage.setItem("auth_token", data.token);
                    alert("登录成功，Token 已保存！");
                } else {
                    alert("登录失败：" + data.msg);
                }
            });
    }

    // 获取用户信息函数（保持不变）
    function getUserInfo() {
        const token = localStorage.getItem("auth_token");
        if (!token) {
            alert("请先登录！");
            return;
        }

        fetch("http://localhost:9000/Token/info", {
            headers: {
                'Authorization': token
            }
        })
            .then(response => response.json())
            .then(data => alert(JSON.stringify(data)));
    }

    // 注销函数（新增）
    function logout() {
        const token = localStorage.getItem("auth_token");
        if (!token) {
            alert("当前未登录！");
            return;
        }

        // 发送注销请求到后端
        fetch("http://localhost:9000/Token/logout", {
            method: "GET",
            headers: {
                'Authorization': token  // 携带当前 token
            }
        })
            .then(response => response.json())
            .then(data => {
                alert(data.msg); // 显示后端返回的注销消息
                localStorage.removeItem("auth_token"); // 无论成功与否，前端移除 token
            })
            .catch(error => {
                alert("注销请求失败：" + error);
            });
    }
</script>
</body>
</html>